<template>

    <div class="box">
      <h3 class="tittle">{{ tittle }} <span class="cl" v-on:click="handleonclick">{{ cl }}</span></h3>
      <ul v-for="item in content" v-show="isshow">
        <li>{{ item.word }}</li>
      </ul>
    </div>
  
  </template>
  
  <script>
  import { ref, reactive } from "vue";
  export default {
    name: 'App',
    setup() {
      const tittle = ref('芙蓉楼送辛渐')
      const cl = ref('收起')
      const content = reactive([{ word: '寒雨连江夜入吴' }, { word: '平明送客楚山孤' }, { word: '洛阳亲友如相问' }, { word: '一片冰心在玉壶' }])
      const isshow = ref(true)
      const handleonclick = () => {
        if (isshow.value === true) {
          isshow.value = false;
          cl.value = '展示'
        } else {
          isshow.value = true;
          cl.value = '收起'
        }
  
      }
  
      return { tittle, content, cl, isshow, handleonclick }
    }
  }
  </script>
  
  <style>
  ul {
    list-style-type: none;
  }
  
  .tittle1 {
    color: black;
  }
  
  .tittle2 {
    padding-left: 30px;
  
  }
  
  .cl {
    margin-left: 40px;
    border: 1px solid red;
  }
  </style>